<%@page contentType="text/html" pageEncoding="UTF-8"%>

<%@taglib prefix="f" uri="http://java.sun.com/jsf/core"%>
<%@taglib prefix="h" uri="http://java.sun.com/jsf/html"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<%--
    Autor: Ricardo Sansores Aguilar
    Vista principal de la aplicación de transformación de expresiones regulares a ADFs y viceversa.
--%>
<f:view>
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Convertidor de expresiones regulares a autómatas finitos y viceversa</title>
            <link href="res/css/main.css" rel="stylesheet" type="text/css" />    
            <script src="res/javascript/ext/jquery-latest.js"></script>
            <script src="res/javascript/ext/jquery.min.js"></script>
            <script src="res/javascript/ext/jquery-ui.min.js"></script>
            <script src="res/javascript/ext/jquery.simpletip-1.3.1.min.js"></script>
            <script src="res/javascript/converterScript.js"></script>
        </head>
        <body>            

            <script type="text/javascript">
                $(document).ready(function(){                                                                                                                          
                    
                    /**
                     * Éste código se ejecuta cuando se intenta hacer un submit de la forma
                     */
                    $("#ConverterForm").submit(function (event){
                        if(!isValidationPassed()){
                            return false;
                        }
                    });
                    
                    //Cuando la página se carga revisa que formulario debe mostrar.
                    hideOrShowComponents();
                    
                    //Cargamos los tooltips en las imágenes de ayuda                                   
                    $(".helpImage").each(function() {
                        $(this).simpletip({
                            content : $($(this).children()[0]).text()
                        });
                    });
            
                    /**
                     * Se ejecuta al presionar el botón de generar tabla ADF. Lee el alfabeto proporcionado,
                     * los estados proporcionados o en su defecto la tabla en formato String y crea una tabla
                     * en pantalla que permite caprutar las transiciones del ADF.
                     */
                    $("#createTableButton").click(function(){
                        createAutomataTable();                                                                       
                    });                                         
                                        
                    /**
                     * Se ejecuta al presionar el botón de convertir ADF a expresión regular.
                     * El id es ConverterForm\\:convertADFButton porque el componente es JSF
                     */
                    $("#ConverterForm\\:convertADFButton").click(function(){
                        validateADFTableCells();
                        
                        //Limpiamos la representación String de la tabla que representa al ADF
                        $("#ConverterForm\\:adfTableStringInput").val(""); 
                        //Iteramos por la tabla y vamos construyendo el String que representa a la tabla.
                        var adfTableString = "";
                        //Lo primero es añadir la lista de estados
                        adfTableString += "states->"+$("#statesInput").val()+";";
                        //Ahora indicamos que estado es el estado inicial                  
                        adfTableString += "start->"+$(".isFirstState").closest("td").next().closest("td").next().attr("textContent")+";";
                        //Anadimos los estados de aceptación
                        adfTableString += "aceptance->";
                        $(".aceptanceState").each(function (aceptanceIndex, aceptanceObject){
                            if(aceptanceIndex != 0){
                                adfTableString += "_"
                            }
                            adfTableString += $(aceptanceObject).attr("id").replace("aceptance_state_label_","");                            
                        });
                        adfTableString += ";";
                        var adfTransitions = "";
                        //Añadimos las transiciones                        
                        $(".adfTableCells").each(function (cellIndex, cellObject){  
                            if(cellIndex != 0 && adfTransitions != ""){
                                adfTransitions += "#"
                            }
                            //Si no hay transición para ese caracter del alfabeto simplemente continuamos con la siguiente iteración
                            if($(cellObject).val() == ""){
                                return true;
                            }
                            adfTransitions += $(cellObject).attr("id").replace("cell_","") + "->" + $(cellObject).val();                            
                        });
                        adfTableString+=adfTransitions;
                        $("#ConverterForm\\:adfTableStringInput").val(adfTableString);
                    });
                                        
                    
                    /*
                     * Sube un estado la marca de estado inicial. Si el primer estado de la tabla es el estado
                     * inicial envía el estado inicial al último estado.
                     */
                    $("#firstStateUpButton").click(function(){
                        pushUpInitialState();
                    });
                    
                    /*
                     * Baja un estado la marca de estado inicial. Si el último estado de la tabla es el estado
                     * inicial envía el estado inicial al primer estado.
                     */
                    $("#firstStateDownButton").click(function(){
                        pushDownInitialState();
                    });                                                                              
                                
                    /**
                     * Se ejecuta cuando se presiona el botón de cambio de modo de operación. Si se encuentra
                     * en pantalla el formulario de captura de expresión regular cambia por el de captura de 
                     * ADF y viceversa.
                     */
                    $("#toggleOperation").click(function(){
                        $("#ConverterForm\\:generalizedADFImage").attr("src","res/empty.png");
                        $("#ConverterForm\\:ADFImage").attr("src","res/empty.png");
                        if($("#regularExpressionToADFContainer").is(":visible")){
                            hideExpressionShowADF(false);
                        }
                        else{
                            hideADFShowExpression(false);
                        }                            
                    });                                        
                                        
                });
            </script>

            <div id="wrapper">
                <div id="container">
                    <div id="header">
                        <h2>
                            <h:outputText value="Convertidor de expresiones regulares a autómatas finitos y viceversa"/>
                        </h2>
                    </div>
                    <div id="content">
                        <h:form id="ConverterForm">  
                            <h:inputHidden id="lastConversion" value="#{converterMB.lastConversion}"/>
                            <h:inputHidden id="adfTableStringInput" value="#{converterMB.adfTable}"/>
                            <input type="button" style="width:100%;" id="toggleOperation" value="Transformar Expresión Regular a Autómata Finito" />
                            
                            <div id="regularExpressionToADFContainer">
                                <h:panelGrid columns="2">
                                    <h:outputLabel value="Proporcione una expresión regular:" />
                                    <h:inputText value="#{converterMB.inputRegularExpression}" size="40"/>
                                    <h:outputLabel value="Presione el botón para convertir en un autómata finito:" />
                                    <h:commandButton value="Convertir" action="#{converterMB.regularExpressionToAdf}"/>                                    
                                </h:panelGrid>
                                <br/>

                                <div class="scroll">
                                    <h:graphicImage id="ADFImage" value="res/#{converterMB.adfImagePath}" alt="Conjunto Vacío" />
                                </div>

                            </div>
                            <div id="adfToRegularExpressionContainer">
                                <table class="adfTable">
                                    <tr>
                                        <td>
                                            <table>
                                                <tr>
                                                    <td>
                                                        Proporcione el alfabeto a utilizar:
                                                    </td>
                                                    <td>
                                                        <input type="text" id="alphabetInput" size="40" />
                                                        <span class="helpImage">
                                                            <p style="display: none;">
                                                                Debe proporcionar el alfabeto sobre el cual realizará operará el autómata. 
                                                                Está premitido cualquier letra y número. El alfabeto reconoce como caractéres diferentes mayúsculas y minúsculas y 
                                                                es importante no usar caracteres de control o símbolos (!,¡,¿,+, etc.) ya que pueden entrar en conflicto con los 
                                                                caracteres de control de la expresión regular. Cada uno de los caracteres del alfabeto debe encontrarse separado por una coma.
                                                            </p>
                                                            <img src="res/img/help_16_16.png" alt="">
                                                        </span>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        Proporcione los estados a utilizar:
                                                    </td>
                                                    <td>
                                                        <input type="text" id="statesInput" size="40" />
                                                        <span class="helpImage">
                                                            <p style="display: none;">
                                                                Proporcione los estados que usará su autómata finito. 
                                                                Debe separar cada estado el autómata con comas.
                                                            </p>
                                                            <img src="res/img/help_16_16.png" alt="">
                                                        </span>                                                       
                                                    </td>
                                                </tr>                                              
                                            </table>
                                        </td>
                                    </tr>                                                                      
                                    <tr>
                                        <td>
                                            <input type="button" id="createTableButton" value="Crear Tabla" />
                                        </td>
                                    </tr>
                                </table>

                                <div class="scroll">
                                    <div id="adfTableResults">
                                        Resultado: <h:outputLabel value="#{converterMB.outputRegularExpression}"/>
                                        <br/>
                                        <h:graphicImage id="generalizedADFImage" value="res/#{converterMB.adfImagePath}" alt="res/empty.png" />
                                    </div>
                                    <div id="adfTableControls">
                                        Cambiar estado inicial: <img id="firstStateUpButton" src="res/img/up_16_16.png" alt="">&nbsp;<img id="firstStateDownButton" src="res/img/down_16_16.png" alt="">&nbsp;
                                        <span class="helpImage">
                                            <p style="display: none;">
                                                Inserte en cada celda el estado al que se realizará la transición al recibir el caracter marcado 
                                                en la columna correspondiente. Puede cambiar el estado inicial utilizando los botones de arriba y abajo o puede indicar 
                                                si un estado es de aceptación presionando sobre la etiqueta del estado. Al concluir la edición presione el 
                                                botón convertir.
                                            </p>
                                            <img src="res/img/help_16_16.png" alt="">
                                        </span>
                                        <br/>
                                        <table id="adfInputTable">
                                            <thead>
                                                <tr id="adfInputTableAlphabet"> </tr>
                                            </thead>
                                            <tbody id="adfInputTableTransitions">
                                            </tbody>
                                        </table>
                                        <br/>
                                        <h:commandButton id="convertADFButton" value="Convertir" action="#{converterMB.adfToRegularExpression}"/>                                          
                                    </div>
                                </div>

                            </div>

                        </h:form>
                    </div>
                    <div id="footer">
                        Proyecto Fundamentos de la Computación.
                        <br/>
                        Ricardo	Sansores    A01105644
                        <br/>
                        Enrique Juarez      A00224620
                        <br/>
                        Tomas Cortes        A00354103
                    </div>
                </div>
            </div>    
        </body>
    </html>
</f:view>
